<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link rel="shortcut icon" href="favicon.ico">
    <link href="static/css/bootstrap.min.css?v=3.3.6"
          rel="stylesheet">
    <link href="static/css/font-awesome.css?v=4.4.0"
          rel="stylesheet">
    <link href="static/css/plugins/bootstrap-table/bootstrap-table.min.css"
          rel="stylesheet">
    <link href="static/css/plugins/jsTree/style.min.css" rel="stylesheet">
    <link href="static/css/plugins/jqTreeGrid/jquery.treegrid.css"
          rel="stylesheet">
    <!--summernote css -->
    <link href="static/css/plugins/summernote/summernote-0.8.8.css"
          rel="stylesheet">
    <link href="static/css/animate.css" rel="stylesheet">
    <link href="static/css/plugins/chosen/chosen.css" rel="stylesheet">
    <link href="static/css/style.css?v=4.1.0" rel="stylesheet">
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content ">
    <div class="col-sm-12">
        <div class="ibox">
            <div class="ibox-body">
                <div  id="exampleToolbar" role="group" >
                    <button type="button" class="btn  btn-primary"
                            onclick="next_page()">
                        <i class="" aria-hidden="true"></i>下一页
                    </button>
                    <button type="button" class="btn  btn-success"
                            onclick="previous_page()">
                        <i class="" aria-hidden="true"></i>上一页
                    </button>

                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <select onchange="chag()" data-placeholder="--选择类别--" name="ddtype" id="ddtype"
                            class="btn chosen-select" tabindex="2" required>
                        <option value="PROC-3JYJVR1V-8AZVUMZPQGK5O37675UJ3-1GC2YAIJ-2">请假</option>
                        <option value="PROC-F2E12DC0-9D9E-4B03-81B6-F49025B59BA0">出差</option>
                        <option value="PROC-A1DBF454-EADA-485D-9938-70F0C976390B">外出</option>
                        <option value="PROC-1ABF577E-5437-4A16-91F6-83F4F0D9B8C4">补卡申请</option>
                    </select>
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <label>开始时间</label>
                    <input id="stime" name="stime"  class="btn" type="text">
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <label>结束时间</label>
                    <input id="etime" name="etime"  class="btn" type="text">

                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    <button class="btn btn-success" onclick="reLoad()">查询</button>

                    <button class="btn btn-warning" onclick="importDingTalk()">导入数据</button>
                </div>

                <table id="exampleTable" data-mobile-responsive="true">
                </table>
                <input type="hidden" id="pag" value="1" />
            </div>
        </div>
    </div>
</div>
<div>
    <script src="static/js/jquery.min.js?v=2.1.4"></script>
    <script src="static/js/bootstrap.min.js?v=3.3.6"></script>
    <script src="static/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
    <script src="static/js/plugins/bootstrap-table/bootstrap-table-mobile.min.js"></script>
    <script src="static/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>
    <script src="static/js/plugins/validate/messages_zh.min.js"></script>
    <script src="static/js/plugins/layer/layer.js"></script>
    <script src="static/js/content.js?v=1.0.0"></script>
    <!--summernote-->
    <script src="static/js/plugins/summernote/summernote.js"></script>
    <script src="static/js/plugins/summernote/summernote-zh-CN.min.js"></script>
    <script src="static/js/ajax-util.js"></script>
    <script src="static/bootstrap-datetimepicker.js"></script>
    <!--bootStrap时间插件中文显示需要放在datetimepicker.js下-->
    <script src="static/bootstrap-datetimepicker.zh-CN.js"></script>
</div>
</body>
<script>
    
    function importDingTalk() {
        layer.confirm('导入4月1到当前时间的数据?', {
            btn : [ '确定', '取消' ]
        }, function() {
            $.ajax({
                url :  prefix + "/tb",
                type : "post",
                success : function(r) {
                    if (r.code == 0) {
                        layer.msg(r.msg);
                        reLoad();
                    } else {
                        layer.msg(r.msg);
                    }
                }
            });
        })
    }
    
    function chag() {
        $("pag").val("1");
    }
    
    var prefix = "/dingtalk"
    $(function() {
        load();
        $('#stime').datetimepicker({
            format: 'yyyy-mm-dd',  //时间格式,如：yyyy:mm:dd等
            minView:'month',
            language: 'zh-CN',// 显示语言
            autoclose:true,
            todayHighlight: true // 当天日期高亮
        });

        $('#etime').datetimepicker({
            format: 'yyyy-mm-dd',  //时间格式,如：yyyy:mm:dd等
            minView:'month',
            language: 'zh-CN',// 显示语言
            autoclose:true,
            todayHighlight: true // 当天日期高亮
        });
    });

    function load() {
        $('#exampleTable')
            .bootstrapTable(
                {
                    method : 'get', // 服务器数据的请求方式 get or post
                    url : prefix + "/list", // 服务器数据的加载地址
                    showRefresh : true,
                    showToggle : true,
                    showColumns : true,
                    iconSize : 'outline',
                    toolbar : '#exampleToolbar',
                    striped : true, // 设置为true会有隔行变色效果
                    dataType : "json", // 服务器返回的数据类型
                    pagination : true, // 设置为true会在底部显示分页条
                    // queryParamsType : "limit",
                    // //设置为limit则会发送符合RESTFull格式的参数
                    singleSelect : false, // 设置为true将禁止多选
                    // contentType : "application/x-www-form-urlencoded",
                    // //发送到服务器的数据编码类型
                    pageSize : 10, // 如果设置了分页，每页数据条数
                    pageNumber : 1, // 如果设置了分布，首页页码
                    search : false, // 是否显示搜索框
                    showColumns : true, // 是否显示内容下拉框（选择显示的列）

                    // contentType : "application/x-www-form-urlencoded",
                    // //发送到服务器的数据编码类型
                    pageSize : 10, // 如果设置了分页，每页数据条数
                    pageNumber : 1, // 如果设置了分布，首页页码
                    // search : true, // 是否显示搜索框
                    showColumns : false, // 是否显示内容下拉框（选择显示的列）
                    sidePagination : "client", // 设置在哪里进行分页，可选值为"client" 或者
                    // "server"
                    queryParams : function(params) {
                        return {
                            // 说明：传入后台的参数包括offset开始索引，limit步长，sort排序列，order：desc或者,以及所有列的键值对
                            limit : params.limit,
                            offset : params.offset,
                            name : $('#searchName').val()
                        };
                    },
                    columns : [
                        {
                            checkbox : true
                        },
                        {
                            field : 'title', // 列字段名
                            title : '标题' // 列标题
                        },
                        {
                            field : 'status', // 列字段名
                            title : '状态' // 列标题
                        },
                        {
                            field : 'result', // 列字段名
                            title : '结果' // 列标题
                        }/*,
                        {
                            field : 'create_time', // 列字段名
                            title : '创建时间' // 列标题
                        },
                        {
                            field : 'finish_time', // 列字段名
                            title : '完成时间' // 列标题
                        }*/,
                        {
                            field : 'originator_userid', // 列字段名
                            title : '用户' // 列标题
                        },
                        {
                            field : 'originator_dept_name', // 列字段名
                            title : '部门' // 列标题
                        },
                        {
                            field : 'stime', // 列字段名
                            title : '开始时间' // 列标题
                        },
                        {
                            field : 'etime', // 列字段名
                            title : '结束时间' // 列标题
                        },
                        {
                            field : 'stype', // 列字段名
                            title : '时长' // 列标题
                        },
                        {
                            field : 'qjtype', // 列字段名
                            title : '类型' // 列标题
                        },
                        {
                            field : 'qjcommon', // 列字段名
                            title : '理由' // 列标题
                        }/*,
                        {
                            title : '操作',
                            field : 'id',
                            align : 'center',
                            formatter : function(value, row, index) {
                                var e = '<a class="btn btn-primary btn-sm" href="#" mce_href="#" title="查看详情" onclick="code(\''
                                    + row.pro
                                    + '\')"><i class="fa fa-code"></i></a> ';
                                return e;
                            }
                        }*/ ]
                });
    }
    function reLoad() {
        var stime=$("#stime").val();//开始时间

        var ddtype=$("#ddtype").val();//类型
        var etime=$("#etime").val();//结束时间
        var pag=$("#pag").val();//结束时间
        var opt = {
            silent: true, //静默刷新
            query:{
                //请求参数
                ddtype:ddtype,
                etime:etime,
                stime:stime,
                pag:pag
            }
        }


        $('#exampleTable').bootstrapTable('refresh',opt);
    }
    //下一页
    function next_page() {
        var pag=$("#pag").val();
        pag=parseInt(pag)+1;
        $("#pag").val(pag);
        reLoad();
    }

    //上一页
    function previous_page() {
        var pag=$("#pag").val();
        pag=parseInt(pag)-1;
        if(pag<=1){
            pag=1;
        }
        $("#pag").val(pag);
        reLoad();
    }
</script>
</html>